<template>
    <el-card class="main" shadow="hover">
      <h1 style=" margin-left:10px">顾客评价：</h1>
      <div class="mainhead">
        <div>
            <span>总评价人数</span>
            <h4>{{totalValue}}</h4>
        </div>
        <div>
            <span>评价最多词汇</span>
            <h4>暖暖的</h4>
        </div>
        <div>
          <span>本月评论数</span>
          <h4>68</h4>
      </div>
        <div>
            <span>今日评论数</span>
            <h4>8</h4>
        </div>
      </div>
      <div class="mainface">
        <bubble-pto />
        <div id="mybox">
            <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" height="600">
              <el-table-column prop="date" label="日期" sortable width="120"></el-table-column>
              <el-table-column prop="name" label="姓名" sortable width="80"></el-table-column>
              <el-table-column prop="address" label="评价" :formatter="formatter"></el-table-column>
            </el-table>
        </div>
      </div>
    </el-card>
</template>
<script>
import BubblePto from '@/components/ServeCom/BubblePto.vue';
export default {
  components: { BubblePto },
  data() {
    return {
      count:0,
      plantCap: [
                { name: '很安心', value: 9 },
                { name: '细心', value: 11 },
                { name: '很好', value: 5 },
                { name: '很喜欢', value: 7 },
                { name: '暖暖的', value: 8 },
                { name: '非常好', value: 4 },
                { name: '孩子喜欢', value: 7 },
                { name: '态度好', value: 14 },
                { name: '很干净', value: 4 }
            ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-17',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-13',
        name: '王小虎',
        address: '上海市asjdua16 弄'
      },
      {
        date: '2016-02-08',
        name: '王小虎',
        address: '上海市asjdua16 弄'
      },
      {
        date: '2016-04-08',
        name: '王小虎',
        address: '上海市asjdua16 弄'
      },
      {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市asjdua16 弄'
      }]

    }
  },component:{
    BubblePto,
  },computed:{
    totalValue() {
      var total=0
      this.plantCap.forEach(con=>{
        total+=con.value
      })
      return total
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  height: 99.5%;
  width: 99.5%;
  display: flex;
  /*设置弹性盒子*/
  flex-direction: column;
  align-items: center;
}
.mainhead{
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px  rgb(184, 253, 253) solid;
  border-radius:20px;
  
}
.mainhead div{
  text-align: center;
  margin-left:5% ;
  margin-right:5% ;
  padding: 4%;
  border-radius: 20px;
}
.mainface{
  display: flex;
  flex-direction: row;
  justify-content: space-between
  
}
/deep/ .el-card__body{
  /*/deep/穿透设置样式*/
  width: 80vw;
  height: 80vh;
}

</style>